<template>
    <div class="photoinfo-container">
        <h3>{{photoinfo.title}}</h3>
        <p class="subtitle">
            <span>发表时间:{{ photoinfo.add_time | dataFormat }}</span>
            <span>点击:{{photoinfo.click}}次</span>
        </p>

        <hr>

        <!--缩略图区域-->
        <vue-preview :slides="list" class="preview"></vue-preview>
        <!--清除浮动-->
        <div style="clear:both"></div>

        <!--图片内容区域-->
        <div class="content" v-html="photoinfo.content"></div>
        <!--评论区子组件-->
        <cmt-box :id="this.id"></cmt-box>
    </div>
</template>

<script>
    import comment from '../subcomponents/comment.vue'

    import sun4 from '../../images/sun04.jpg'
    import sun5 from '../../images/sun05.jpg'
    import sun6 from '../../images/sun06.jpg'
    import sun7 from '../../images/sun07.jpg'

    export default {
        data(){
            return{
                id: this.$route.params.id,
                photoinfo:{ id:37, add_time:'2019-01-24T16:18:24.000Z', click:59, title:'英灵 孙笑川 五星限定', content:'&nbsp; &nbsp; &nbsp;被上帝抛弃的可怜之人，命运注定是悲惨的，8岁时唯一最亲的亲人（奶奶除外）母亲去世了，后来为帮助网上的迷途少女而被骗走所有的钱，但他并没有被命运所屈服，他以强大的抑制力挣脱了命运，在成都地下世界登上皇帝的宝座。天皇孙笑川给安排的死命令，必须给整的明明白白的！ <p>&nbsp; &nbsp; &nbsp;召唤：哎呀master，谢谢master送的圣晶石，哎呀master好久没见到你啦。</p><p>&nbsp; &nbsp; &nbsp; 升级：真的牛批</p><p>&nbsp; &nbsp; &nbsp; 灵基再临1：你要我一直笑吗？</p><p>&nbsp; &nbsp; &nbsp; 灵基再临2：其实我是一个非常儒雅随和的一个人，我不喜欢骂脏话，但是你们是经常在嘴臭对不对？</p><p>&nbsp; &nbsp; &nbsp;灵基再临3：大明星？我巴不得我是大几⑧</p><p>&nbsp; &nbsp; &nbsp;灵基再临4：对！我是你哥哥，我们两个都是你妈的儿子。</p><p>&nbsp; &nbsp; &nbsp; &nbsp;开始1：你们是不是龙鸣？</p><p>&nbsp; &nbsp; &nbsp; &nbsp;开始2：你的韩式一字眉好漂亮哦，哎呀，你的卧蚕好漂亮哦。</p><p>&nbsp; &nbsp; &nbsp; &nbsp;红卡：恰柠檬？</p><p>&nbsp; &nbsp; &nbsp; &nbsp;绿卡：我佛了</p><p>&nbsp; &nbsp; &nbsp; &nbsp;蓝卡：会个锤子？</p><p>&nbsp; &nbsp; &nbsp; &nbsp; EX卡：N［马］$L！</p><p>&nbsp; &nbsp; &nbsp; &nbsp;失败1：我Tony ma，你信不信！</p><p>&nbsp; &nbsp; &nbsp; &nbsp;失败2：哎呀，这个鼻子堵着了，很尖儿难受。</p><p>&nbsp; &nbsp; &nbsp; &nbsp;羁绊1：我可以为喜欢的人做改变，但让我为讨厌的人做改变，告诉你impossible！</p><p>&nbsp; &nbsp; &nbsp; &nbsp;羁绊2：你以为那么多女生喜欢我是因为什么？因为我这张脸吗？我没点批数吗？还不是因为我儒雅。</p><p>&nbsp; &nbsp; &nbsp; 羁绊3：华儿该又下雪了。冷的不是天气，是人心。</p><p>&nbsp; &nbsp; &nbsp; 羁绊4：我是我要透你，我们网恋吧！</p>'},
                list:[  //缩略图的数组
                    { src:sun4, w:600, h:400, msrc:sun4},
                    { src:sun5, w:600, h:400, msrc:sun5},
                    { src:sun6, w:600, h:400, msrc:sun6},
                    { src:sun7, w:600, h:400, msrc:sun7},
                ]
            }
        },
        created(){ this.getPhotoInfo();
            this.getThumbs();
        },
        methods:{
            getPhotoInfo(){
                //    根据分类ID获取图片列表
                this.$http.get('api/getimageinfo/'+ this.id).then(result=>{
                    if (result.body.status === 0 ){
                        this.photoinfo = result.body.message
                    }
                })
            },
            getThumbs(){
                //    根据分类ID获取图片列表
                this.$http.get('api/getthumimages/'+ this.id).then(result=>{
                    if (result.body.status === 0 ){
                        result.body.message.forEach(item=>{     //循环每个图片数据 补全每个图片宽和高
                            item.w = 600;
                            item.h = 400;
                            item.msrc=item.src;
                        });
                        this.list = result.body.message     //把完整数据保存到list中
                    }
                })
            },
        },
        components:{
            'cmt-box':comment
        }
    }
</script>

<style lang="scss">
    .photoinfo-container{
        padding:3px;
        h3{
            color: #E60026;
            font-size:16px;
            text-align:center;
            margin:15px 0;
        }
        .subtitle{
            display: flex;
            justify-content: space-between;
            font-size:14px;
        }
        .content{
            font-size:15px;
        }
    }
    .preview{
        img{
            width:100px;
            height:100px;
            margin:0 0 10px 10px;
            float:left;
            box-shadow: 0 0 8px #999;
        }
        figure{
            margin:0;
            padding:0;
        }
    }
</style>